<template>
  <div>
    <!--实现整体布局 具体细节在单个组件中进行实现 只不过是需要全局的状态-->
    <!--三个行内DIV.-->
    <el-row>
      <!--左侧-->
      <el-col :span="1" class="div_left">
        <div class="grid-content bg-purple">
          <MainLeft/>
        </div>
      </el-col>

      <el-col :span="5" class="div_middle">
        <div class="grid-content bg-purple-light">
          <MiddleSearch/>
          <MiddleSession
              v-if="this.$store.state.leftStatus.mainMenuStatu === this.$store.state.leftStatus.mainWinPageStatus.Session"/>
          <MiddleFriend
              v-if="this.$store.state.leftStatus.mainMenuStatu === this.$store.state.leftStatus.mainWinPageStatus.Friends"/>
          <MiddleCloud
              v-if="this.$store.state.leftStatus.mainMenuStatu === this.$store.state.leftStatus.mainWinPageStatus.Cloud"/>
        </div>
      </el-col>

      <el-col :span="18" class="div_right">
        <div class="grid-content bg-purple">
          <RightTop/>
          <!--          根据状态单独使用组件.-->
          <RightChartSession
              v-if="this.$store.state.leftStatus.mainMenuStatu === this.$store.state.leftStatus.mainWinPageStatus.Session"/>
          <!--          这里需要重新设置出群的页面.-->
          <RightGroupChartSession
              v-if="this.$store.state.leftStatus.mainMenuStatu === this.$store.state.leftStatus.mainWinPageStatus.GroupSession"/>
          <RightFriendInfo
              v-if="this.$store.state.leftStatus.mainMenuStatu === this.$store.state.leftStatus.mainWinPageStatus.Friends"/>
          <RightAddFriend
              v-if="this.$store.state.leftStatus.mainMenuStatu === this.$store.state.leftStatus.mainWinPageStatus.Add"/>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>

import MainLeft from './left/mainleft'
import MiddleSearch from './middle/middle_search'
import RightTop from './right/right_top'
import MiddleSession from './middle/middle_session'
import MiddleFriend from './middle/middle_friends'
import MiddleCloud from './middle/middle_cloud'
import RightChartSession from './right/right_chart_session'
import RightFriendInfo from './right/right_friend_info'
import RightAddFriend from './right/addfriend/right_add_friend'
import RightGroupChartSession from './right/right_group_chart_session'

export default {
  name: "Main",
  components: {
    MainLeft, MiddleSearch, RightTop, MiddleSession,
    MiddleFriend, MiddleCloud, RightChartSession, RightFriendInfo,
    RightAddFriend, RightGroupChartSession
  },
  data() {
    return {
      // 要进行查询的值.
      queryKey: "",
      recentQueryFriend: []
    }
  },
  methods: {},
}
</script>

<style scoped>

/*总体DIV布局*/
.div_left {
  width: 500px;
  height: 890px;
  /*border: 1px dashed #1abc9c;*/
  /*background-color: #ededef;*/
  border-right: 1px solid rgba(189, 195, 199, 0.33);
}

.div_middle {
  width: 16em;
  /*border: 1px dashed pink;*/
  /*border-right: 1px solid #bdc3c7;*/
  border-right: 1px solid rgba(189, 195, 199, 0.33);
}

.div_right {
  width: 73%;
  /*border: 1px dashed #3498db;*/
}

</style>